$(document).ready(function () {
  // window.addEventListener("resize", () => {
  //   location.reload();
  // });
  var pointIndex = 0;
  // vue
  let vm = new Vue({
    el: '#app',
    data: {
      userArray:[ 
        //工人位上
        { x: 8, y: 0,numIndex:1 },{ x: 127, y: 0,numIndex:2 },{ x: 247, y: 0,numIndex:3 },{ x: 367, y: 0,numIndex:4 },{ x: 487, y: 0,numIndex:5 },
        { x: 607, y: 0,numIndex:6 },{ x: 727, y: 0,numIndex:7 },
        { x: 846, y: 0,numIndex:8 },{ x: 967, y: 0,numIndex:9 },{ x: 1087, y: 0,numIndex:10 },{ x: 1207, y: 0,numIndex:11 },{ x: 1327, y: 0,numIndex:12 },
        { x: 1445, y: 0,numIndex:13 },
        // 工人位下
        { x: 10, y: 400,numIndex:26 },{ x: 130, y: 400,numIndex:25 },{ x: 250, y: 400,numIndex:24 },{ x: 370, y: 400,numIndex:23 },{ x: 490, y: 400,numIndex:22 },
        { x: 610, y: 400,numIndex:21 },{ x: 730, y: 400,numIndex:20 },
        { x: 850, y: 400,numIndex:19 },{ x: 970, y: 400,numIndex:18 },{ x: 1090, y: 400,numIndex:17 },{ x: 1210, y: 400,numIndex:16 },{ x: 1330, y: 400,numIndex:15 },
        { x: 1450, y: 400,numIndex:14 },
      ],
      pointArray: [
        //轨道点
        { x: 34, y: 160,numIndex:1 },{ x: 154, y: 160,numIndex:2 },{ x: 274, y: 160,numIndex:3 },{ x: 394, y: 160,numIndex:4 },{ x: 514, y: 160,numIndex:5 },
        { x: 634, y: 160,numIndex:6 },{ x: 754, y: 160,numIndex:7 },
        { x: 874, y: 160,numIndex:8 },{ x: 994, y: 160,numIndex:9 },{ x: 1114, y: 160,numIndex:10 },{ x: 1234, y: 160,numIndex:11 },{ x: 1354, y: 160,numIndex:12 },
        { x: 1476, y:160,numIndex:13 },
        //轨道点
        { x: 36, y: 340,numIndex:26 },{ x: 156, y: 340,numIndex:25 },{ x: 276, y: 340,numIndex:24 },{ x: 396, y: 340,numIndex:23 },{ x: 516, y: 340,numIndex:22 },
        { x: 636, y: 340,numIndex:21 },{ x: 756, y: 340,numIndex:20 },
        { x: 875, y: 340,numIndex:19 },{ x: 997, y: 340,numIndex:18 },{ x: 1117, y: 340,numIndex:17 },{ x: 1236, y: 340,numIndex:16 },{ x: 1356, y: 340,numIndex:15 },
        { x: 1476, y: 340,numIndex:14 },
      ],
      pointRouteArray:[
        
        // { x: 110, y: 150 },{ x: 110, y: 0 },{ x: 110, y: 150 },
        // { x: 260, y: 150 },{ x: 260, y: 0 },{ x: 260, y: 150 },
        // { x: 310, y: 150 },{ x: 310, y: 0 },{ x: 310, y: 150 },
        // { x: 510, y: 150 },{ x: 510, y: 0 },{ x: 510, y: 150 },
        // { x: 610, y: 150 },
        // { x: 610, y: 300 },
        // { x: 460, y: 300 },{ x: 460, y: 350 },{ x: 460, y: 300 },
        // // { x: 310, y: 300 },
        // { x: 260, y: 300 },{ x: 260, y: 350 },{ x: 260, y: 300 },
        // { x: 60, y: 300 },{ x: 60, y: 350 },{ x: 60, y: 300 },
        // { x: 10, y: 300 }
    ],
      _interval:1000,
      int: 0,
      thisPointIndex: 0,
      thisEndX: 33,
      thisEndY: 115,
      imgOffset: 1,
      speedX: 1,
      speedY: 10,
      loopList:[],
      routeNew: [],
      routeNewTwo:[],
      routeNewThree:[],
      routeNewFour:[],
      routeNewFive:[]
    },
    created() {
      
    },
    mounted() {
      // this.toMove()
    },
    methods: {
      // 设置完成之后的点位
      setDot(routeNew,activeName){
        this.userArray.forEach((item,index) =>{
          routeNew.forEach((v,k) =>{
            if(item.numIndex == v){
              this.$set(item,activeName,true)
            }
          })
        })
      },
      start(){
        this.pointRouteArray = [{ x: 34, y: 160,numIndex:1 }]
        // this.pointRouteArray = [{ x: 34, y: 160,numIndex:1 },{ x: 394, y: 160,numIndex:4 },{ x: 394, y: 115,numIndex:4 },{ x: 394, y: 160,numIndex:4 },{ x: 1474, y:160,numIndex:13 }
        //   ,{ x: 1474, y: 340,numIndex:14 },{ x: 1354, y: 340,numIndex:15 },{ x: 1354, y: 405,numIndex:15 },{ x: 1354, y: 340,numIndex:15 }, { x: 34, y: 340,numIndex:26 }]
        // this.routeNewTransform(this.routeNew)
        this.routeNew = [1,3]
        this.routeNewTwo = [1,4]
        this.routeNewThree = [1,5]
        this.routeNewFour = [1,6]
        this.routeNewFive = [1,2]
        this.routeNewTransform(this.routeNew)
        this.setDot(this.routeNew,'activeOne')  //设置红点
        this.setDot(this.routeNewTwo,'activeTwo')
        this.setDot(this.routeNewThree,'activeThree')
        this.setDot(this.routeNewFour,'activeFour')
        this.setDot(this.routeNewFive,'activeFive')
        // console.log(this.routeNewTransform(this.routeNew),5555)
        this.toMove()
        return
        let a = []
        this.pointArray.forEach((item,index) =>{
          this.routeNewTransform(this.routeNew).forEach((v,k)=>{
            if(index != 0){
              if(item.numIndex == v){
                a = [
                  {
                    x:item.x,
                    y:item.y,
                  },
                  {
                    x:item.x,
                    y: 115,
                  },
                  {
                    x:item.x,
                    y:item.y,
                  },
                ]
                this.pointRouteArray = this.pointRouteArray.concat(a)
              }
            }
          })
          
        })
        console.log(this.pointRouteArray)
        this.toMove()
      },
      routeNewTransform(routeNew){
        if(this.maxArray(routeNew) <= 13){
          this.pointArray.forEach(((item,index) =>{
            routeNew.forEach((v,k) =>{
              if(index != 0){
                if(item.numIndex == v){
                  a = [
                    {
                      x:item.x,
                      y:item.y,
                      numIndex: item.numIndex
                    },
                    {
                      x:item.x,
                      y: 115,
                      numIndex: item.numIndex
                    },
                    {
                      x:item.x,
                      y:item.y,
                      numIndex: item.numIndex
                    },
                  ]
                  this.pointRouteArray = this.pointRouteArray.concat(a)
                }
              }
            })
          }))
          console.log(this.pointRouteArray,9999)
          return this.pointRouteArray
          // 最大值为14，且包含13
        }else if(this.maxArray(routeNew) == 14 && routeNew.indexOf(13)>-1){
          this.pointArray.forEach(((item,index) =>{
            routeNew.forEach((v,k) =>{
              if(index != 0){
                if(item.numIndex == v && v<=13){
                  a = [
                    {
                      x:item.x,
                      y:item.y,
                      numIndex: item.numIndex
                    },
                    {
                      x:item.x,
                      y: 115,
                      numIndex: item.numIndex
                    },
                    {
                      x:item.x,
                      y:item.y,
                      numIndex: item.numIndex
                    },
                  ]
                  this.pointRouteArray = this.pointRouteArray.concat(a)
                }else if(item.numIndex == v && v>13){
                  a = [
                    {
                      x:item.x,
                      y:item.y,
                      numIndex: item.numIndex
                    },
                    {
                      x:item.x,
                      y: 385,
                      numIndex: item.numIndex
                    },
                    {
                      x:item.x,
                      y:item.y,
                      numIndex: item.numIndex
                    },
                  ]
                  this.pointRouteArray = this.pointRouteArray.concat(a)
                }
              }
            })
          }))
          return this.pointRouteArray
          // 最大值为14，不包含13
        }else if(this.maxArray(routeNew) == 14 && routeNew.indexOf(13)<=-1){
          this.pointArray.forEach(((item,index) =>{
            routeNew.forEach((v,k) =>{
              if(index != 0){
                if(item.numIndex == v && v<=13){
                  a = [
                    {
                      x:item.x,
                      y:item.y,
                    },
                    {
                      x:item.x,
                      y: 115,
                    },
                    {
                      x:item.x,
                      y:item.y,
                    },
                  ]
                  this.pointRouteArray = this.pointRouteArray.concat(a)
                }else if(item.numIndex == v && v>13){
                  a = [
                    {
                      x:1474,
                      y:160,
                      numIndex:13
                    },
                    {
                      x:item.x,
                      y:item.y,
                      numIndex:14
                    },
                    {
                      x:item.x,
                      y: 385,
                      numIndex:14
                    },
                    {
                      x:item.x,
                      y:item.y,
                      numIndex:14
                    },
                  ]
                  this.pointRouteArray = this.pointRouteArray.concat(a)
                }
              }
            })
          }))
          // return routeNew.splice(routeNew.length-1,0,13)
          // 最大值大于14，包含13,14
        }else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(13)>-1 && routeNew.indexOf(14)>-1){
          this.pointArray.forEach(((item,index) =>{
            routeNew.forEach((v,k) =>{
              if(index != 0){
                if(item.numIndex == v && v<=13){
                  a = [
                    {
                      x:item.x,
                      y:item.y,
                      numIndex: v
                    },
                    {
                      x:item.x,
                      y: 115,
                      numIndex: v
                    },
                    {
                      x:item.x,
                      y:item.y,
                      numIndex: v
                    },
                  ]
                  this.pointRouteArray = this.pointRouteArray.concat(a)
                }else if(item.numIndex == v && v>13){
                  a = [
                    {
                      x:item.x,
                      y:item.y,
                      numIndex:v
                    },
                    {
                      x:item.x,
                      y: 385,
                      numIndex:v
                    },
                    {
                      x:item.x,
                      y:item.y,
                      numIndex:v
                    },
                  ]
                  this.pointRouteArray = this.pointRouteArray.concat(a)
                  this.pointRouteArray = this.pointRouteArray.sort(this.sortBy('numIndex',true))

                }
              }
            })
          }))
          console.log(this.pointRouteArray)
          // 最大值大于14，包含13,不包含14
        }else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(13)>-1 && routeNew.indexOf(14)<=-1){
          this.pointArray.forEach(((item,index) =>{
            routeNew.forEach((v,k) =>{
              if(index != 0){
                if(item.numIndex == v && v<=13){
                  a = [
                    {
                      x:item.x,
                      y:item.y,
                      numIndex: v
                    },
                    {
                      x:item.x,
                      y: 115,
                      numIndex: v
                    },
                    {
                      x:item.x,
                      y:item.y,
                      numIndex: v
                    },
                  ]
                  this.pointRouteArray = this.pointRouteArray.concat(a)
                }else if(item.numIndex == v && v > 13){
                  a = [
                    {
                      x:item.x,
                      y:item.y,
                      numIndex:v
                    },
                    {
                      x:item.x,
                      y: 385,
                      numIndex:v
                    },
                    {
                      x:item.x,
                      y:item.y,
                      numIndex:v
                    },
                  ]
                  this.pointRouteArray = this.pointRouteArray.concat(a)
                  this.pointRouteArray.splice(routeNew.length-1,0,{
                    x:1476,
                    y:340,
                    numIndex:14
                  },)
                  this.pointRouteArray = this.pointRouteArray.sort(this.sortBy('numIndex',true))
                }
              }
            })
          }))
          // 最大值大于14，不包含13,包含14
        }else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(14)>-1 && routeNew.indexOf(13)<=-1){
          this.pointArray.forEach(((item,index) =>{
            routeNew.forEach((v,k) =>{
              if(index != 0){
                if(item.numIndex == v && v<=13){
                  a = [
                    {
                      x:item.x,
                      y:item.y,
                      numIndex: v
                    },
                    {
                      x:item.x,
                      y: 115,
                      numIndex: v
                    },
                    {
                      x:item.x,
                      y:item.y,
                      numIndex: v
                    },
                  ]
                  this.pointRouteArray = this.pointRouteArray.concat(a)
                }else if(item.numIndex == v && v > 13){
                  a = [
                    {
                      x:item.x,
                      y:item.y,
                      numIndex:v
                    },
                    {
                      x:item.x,
                      y: 385,
                      numIndex:v
                    },
                    {
                      x:item.x,
                      y:item.y,
                      numIndex:v
                    },
                  ]
                  this.pointRouteArray = this.pointRouteArray.concat(a)
                  this.pointRouteArray.splice(routeNew.length-2,0,{
                    x:1476,
                    y:160,
                    numIndex:13
                  },)
                  this.pointRouteArray = this.pointRouteArray.sort(this.sortBy('numIndex',true))
                }
              }
            })
          }))
          // return routeNew.splice(routeNew.length-2,0,13)
          // 最大值大于14，不包含13,不包含14
        }else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(14)<=-1 && routeNew.indexOf(13)<=-1){
          this.pointArray.forEach(((item,index) =>{
            routeNew.forEach((v,k) =>{
              if(index != 0){
                if(item.numIndex == v && v<=13){
                  a = [
                    {
                      x:item.x,
                      y:item.y,
                      numIndex: v
                    },
                    {
                      x:item.x,
                      y: 115,
                      numIndex: v
                    },
                    {
                      x:item.x,
                      y:item.y,
                      numIndex: v
                    },
                  ]
                  this.pointRouteArray = this.pointRouteArray.concat(a)
                }else if(item.numIndex == v && v > 13){
                  a = [
                    {
                      x:item.x,
                      y:item.y,
                      numIndex:v
                    },
                    {
                      x:item.x,
                      y: 385,
                      numIndex:v
                    },
                    {
                      x:item.x,
                      y:item.y,
                      numIndex:v
                    },
                  ]
                  this.pointRouteArray = this.pointRouteArray.concat(a)
                  this.pointRouteArray.splice(routeNew.length-2,0,{
                    x:1476,
                    y:160,
                    numIndex:13
                  },)
                  this.pointRouteArray.splice(routeNew.length-2,0,{
                    x:1476,
                    y:340,
                    numIndex:14
                  },)
                  this.pointRouteArray = this.pointRouteArray.sort(this.sortBy('numIndex',true))
                }
              }
            })
          }))
          //   routeNew.splice(routeNew.length-1,0,13)
        //  return routeNew.splice(routeNew.length-1,0,14)
        }
      },
      maxArray(list){
        let maxNum = Math.max(...list)
        return maxNum
      },
      toMove(){
        this.int = setInterval(this.moveImgToPoint,5)
      },
      sortBy(property,asc){
         if (asc==undefined) {
                asc = -1
            } else {
                asc=asc ? -1 : 1
            }
            return function (value1, value2) {
                let a = value1[property]
                let b = value2[property]
                return a < b ? asc : a > b ? asc*-1 : 0
            }
      },
      moveImgToPoint(){
        // console.log(1111)
        let ele = document.getElementById('needmoveimg');
        let x = Number(ele.style.left.replace('px', ''));
        let y = Number(ele.style.top.replace('px', ''));
        //到达目标点
        if(x == this.thisEndX && y == this.thisEndY){
          this.changeEndPoint();
        }
        var nextX = this.thisEndX > x ? x + 1 : (this.thisEndX < x ? x - 1 : x);
        var nextY = this.thisEndY > y ? y + 1 : (this.thisEndY < y ? y - 1 : y);
        ele.style.left = nextX + 'px';
        ele.style.top = nextY + 'px';
        this.CreatePoint(nextX, nextY, '');
      },
      changeEndPoint(){
        if(this.thisPointIndex > this.pointRouteArray.length - 1){
          this.int = window.clearInterval(this.int);
          this.loopList.push(true)
          if(this.loopList.length == 1){
            $('.lineOne').css('display','block')
            $('.dot').css('display','block')
            // 第二条\
            this.int = window.clearInterval(this.int);
            setTimeout(() =>{
              let self =$('.moveCloth')
              self.remove()
              // return
              
              this.thisEndX = 33
              this.thisEndY = 115
              let ele = document.getElementById('needmoveimg');
              ele.style.left = 33 + 'px';
              ele.style.top = 115 + 'px';
              this.thisPointIndex = 0
              this.pointRouteArray = [{ x: 34, y: 160,numIndex:1 }]
              // return
              // this.routeNewTwo = [1,13]
              console.log(this.routeNewTwo)
              this.routeNewTransform(this.routeNewTwo)
              this.toMove()
            },1000)
          }
          if(this.loopList.length == 2){
            $('.lineTwo').css('display','block')
            $('.dotTwo').css('display','block')
            // 第三条
            this.int = window.clearInterval(this.int);
            setTimeout(() =>{
              let self =$('.moveCloth')
              self.remove()
              // return
              
              this.thisEndX = 33
              this.thisEndY = 115
              let ele = document.getElementById('needmoveimg');
              ele.style.left = 33 + 'px';
              ele.style.top = 115 + 'px';
              this.thisPointIndex = 0
              this.pointRouteArray = [{ x: 34, y: 160,numIndex:1 }]
              // return
              // this.routeNewTwo = [1,13]
              console.log(this.routeNewThree)
              this.routeNewTransform(this.routeNewThree)
              this.toMove()
            },1000)
          }
          if(this.loopList.length == 3){
            $('.lineThree').css('display','block')
            $('.dotThree').css('display','block')
            // 第四条
            this.int = window.clearInterval(this.int);
            setTimeout(() =>{
              let self =$('.moveCloth')
              self.remove()
              // return
              
              this.thisEndX = 33
              this.thisEndY = 115
              let ele = document.getElementById('needmoveimg');
              ele.style.left = 33 + 'px';
              ele.style.top = 115 + 'px';
              this.thisPointIndex = 0
              this.pointRouteArray = [{ x: 34, y: 160,numIndex:1 }]
              // return
              // this.routeNewTwo = [1,13]
              console.log(this.routeNewFour)
              this.routeNewTransform(this.routeNewFour)
              this.toMove()
            },1000)
          }
          if(this.loopList.length == 4){
            $('.lineFour').css('display','block')
            $('.dotFour').css('display','block')
            // 第五条
            this.int = window.clearInterval(this.int);
            setTimeout(() =>{
              let self =$('.moveCloth')
              self.remove()
              // return
              
              this.thisEndX = 33
              this.thisEndY = 115
              let ele = document.getElementById('needmoveimg');
              ele.style.left = 33 + 'px';
              ele.style.top = 115 + 'px';
              this.thisPointIndex = 0
              this.pointRouteArray = [{ x: 34, y: 160,numIndex:1 }]
              // return
              // this.routeNewTwo = [1,13]
              console.log(this.routeNewFive)
              this.routeNewTransform(this.routeNewFive)
              this.toMove()
            },1000)
          }
          if(this.loopList.length == 5){
            $('.lineFive').css('display','block')
            $('.dotFive').css('display','block')
          }
          console.log(this.loopList)
          return
        }
        var endPoint = this.pointRouteArray[this.thisPointIndex];
        var endX = endPoint.x - this.imgOffset;
        var endY = endPoint.y - this.imgOffset;
        this.thisEndX = endX;
        this.thisEndY = endY;
        this.thisPointIndex++;
      },
      CreatePoint(x,y,color) {
        pointIndex++;
        if(pointIndex % 4 != 0){ return; };
        var ele = document.getElementById('showLine');
        var newEle = "<div class='moveCloth' name='lineNumber_' border='0px solid red;' style='position: absolute; left: "+ (x + this.imgOffset) + "px; top: " + (y + this.imgOffset) + "px;" 
            + "background-color: "+'#26bc26'+";width:4px;height:4px;' ></div>";
        ele.innerHTML += newEle;
        // console.log(ele)
      }
    },
    computed:{
      //动态设置样式
      setIconStyle() {
      return function (item) {
        // console.log(item)
        return {
          'left': item.x+'px',
          'top': item.y+'px'
        }
        }
      },
      classes(){
        return function(item,index){
          return {
            'activeOne':item.activeOne,'activeOneIndexOne':item.activeOne&&index ==0,'activeOneIndexTwo':item.activeOne&&index ==12,'activeOneIndexThree':item.activeOne&&index ==13,'activeOneIndexFour':item.activeOne&&index ==25,
            'activeTwo':item.activeTwo,'activeTwoIndexOne':item.activeTwo&&index ==0,'activeTwoIndexTwo':item.activeTwo&&index ==12,'activeTwoIndexThree':item.activeTwo&&index ==13,'activeTwoIndexFour':item.activeTwo&&index ==25,
            'activeThree':item.activeThree,'activeThreeIndexOne':item.activeThree&&index ==0,'activeThreeIndexTwo':item.activeThree&&index ==12,'activeThreeIndexThree':item.activeThree&&index ==13,'activeThreeIndexFour':item.activeThree&&index ==25,
            'activeFour':item.activeFour,'activeFourIndexOne':item.activeFour&&index ==0,'activeFourIndexTwo':item.activeFour&&index ==12,'activeFourIndexThree':item.activeFour&&index ==13,'activeFourIndexFour':item.activeFour&&index ==25,
            'activeFive':item.activeFive,'activeFiveIndexOne':item.activeFive&&index ==0,'activeFiveIndexTwo':item.activeFive&&index ==12,'activeFiveIndexThree':item.activeFive&&index ==13,'activeFiveIndexFour':item.activeFive&&index ==25
          }
        }
      },
      lineStyle(){
        return function(routeNew,numOne,numTwo,nunThree){
          // console.log(this.routeNew)
          // 路线长度最大13
          if(this.maxArray(routeNew) <= 13){
            if(this.maxArray(routeNew)<13){
              console.log(this.maxArray(routeNew))
              return{
                'width': (this.maxArray(routeNew)-1)* 60 +(this.maxArray(routeNew)-2)*60+numTwo+nunThree +'px',
                'borderTop': '4px solid #CCCFD9'
              }
            }else if(this.maxArray(routeNew) ==13){
              return{
                'width': (this.maxArray(routeNew)-1)* 60 +(this.maxArray(routeNew)-2)*60+numTwo +'px',
                'borderTop': '4px solid #CCCFD9'
              }
            }
            // 最大值为14，且包含13
          }else if(this.maxArray(routeNew) == 14 && routeNew.indexOf(13)>-1){
            return{
              'width': numOne+'px',
              'borderTop': '4px solid #CCCFD9',
              'borderRight': '4px solid #CCCFD9'
            }
            // 最大值为14，不包含13
          }else if(this.maxArray(routeNew) == 14 && routeNew.indexOf(13)<=-1){
            return{
              'width': numOne+'px',
              'borderTop': '4px solid #CCCFD9',
              'borderRight': '4px solid #CCCFD9'
            }
            // 最大值大于14，包含13,14 && routeNew.indexOf(13)>-1 && routeNew.indexOf(14)>-1
          }else if(this.maxArray(routeNew) > 14){
            // 不包含26
            if(this.maxArray(routeNew)<26){
              return{
                'width':  numOne+'px',
                'borderRight': '4px solid #CCCFD9',
                'borderTop': '4px solid #CCCFD9',
                'height':'134px'
                // 'borderBottom': '4px solid #fff'
              }
            }
            else if(this.maxArray(routeNew) == 26){
              return{
                'width': numOne + 'px',
                'borderTop': '4px solid #CCCFD9',
                'borderRight': '4px solid #CCCFD9',
                'borderBottom': '4px solid #CCCFD9'
              }
            }
            // 最大值大于14，包含13,不包含14
          }
          // else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(13)>-1 && routeNew.indexOf(14)<=-1){

          //   //  最大值大于14，不包含13,包含14
          // }else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(14)>-1 && routeNew.indexOf(13)<=-1){
            
          //   // 最大值大于14，不包含13,不包含14
          // }else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(14)<=-1 && routeNew.indexOf(13)<=-1){

          // }
          
        }
      },
      lineStyleOneBottom(){
        return function(routeNew){
          if(this.maxArray(routeNew)<26){
            return{
              'width':  (this.maxArray(routeNew)-14)* 60 +(this.maxArray(routeNew)-15)*60+30+11 +'px',
              'borderRight': '4px solid #CCCFD9',
              'borderTop': '4px solid #CCCFD9',
            }
          }
        }
      },
      lineTwoStyle(){
        return function(routeNew){
          console.log(routeNew)
          // 路线长度最大13
          if(this.maxArray(routeNew) <= 13){
            if(this.maxArray(routeNew)<13){
              console.log(this.maxArray(routeNew))
              return{
                'width': (this.maxArray(routeNew)-1)* 60 +(this.maxArray(routeNew)-2)*60+30+10 +'px',
                'borderTop': '4px solid #CCCFD9'
              }
            }else if(this.maxArray(routeNew) ==13){
              return{
                'width': (this.maxArray(routeNew)-1)* 60 +(this.maxArray(routeNew)-2)*60+10 +'px',
                'borderTop': '4px solid #CCCFD9'
              }
            }
            // 最大值为14，且包含13
          }else if(this.maxArray(routeNew) == 14 && routeNew.indexOf(13)>-1){
            return{
              'width': '1387px',
              'borderTop': '4px solid #CCCFD9',
              'borderRight': '4px solid #CCCFD9'
            }
            // 最大值为14，不包含13
          }else if(this.maxArray(routeNew) == 14 && this.routeNew.indexOf(13)<=-1){
            return{
              'width': '1387px',
              'borderTop': '4px solid #CCCFD9',
              'borderRight': '4px solid #CCCFD9'
            }
            // 最大值大于14，包含13,14 && routeNew.indexOf(13)>-1 && routeNew.indexOf(14)>-1
          }else if(this.maxArray(routeNew) > 14){
            // 不包含26
            if(this.maxArray(routeNew)<26){
              return{
                'width':  '1387px',
                'borderRight': '4px solid #CCCFD9',
                'borderTop': '4px solid #CCCFD9',
                'height':'108px'
                // 'borderBottom': '4px solid #fff'
              }
            }
            else if(this.maxArray(routeNew) == 26){
              return{
                'width': 1387 + 'px',
                'borderTop': '4px solid #CCCFD9',
                'borderRight': '4px solid #CCCFD9',
                'borderBottom': '4px solid #CCCFD9'
              }
            }
            // 最大值大于14，包含13,不包含14
          }
          // else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(13)>-1 && routeNew.indexOf(14)<=-1){

          //   //  最大值大于14，不包含13,包含14
          // }else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(14)>-1 && routeNew.indexOf(13)<=-1){
            
          //   // 最大值大于14，不包含13,不包含14
          // }else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(14)<=-1 && routeNew.indexOf(13)<=-1){

          // }
          
        }
      },
      lineStyleTwoBottom(){
        return function(routeNew){
          if(this.maxArray(routeNew)<26){
            return{
              'width':  (this.maxArray(routeNew)-14)* 60 +(this.maxArray(routeNew)-15)*60+30+ (-1) +'px',
              'borderRight': '4px solid #CCCFD9',
              'borderTop': '4px solid #CCCFD9',
            }
          }
        }
      },
      // 第三条
      lineThreeStyle(){
        return function(routeNew){
          console.log(routeNew)
          // 路线长度最大13
          if(this.maxArray(routeNew) <= 13){
            if(this.maxArray(routeNew)<13){
              console.log(this.maxArray(routeNew))
              return{
                'width': (this.maxArray(routeNew)-1)* 60 +(this.maxArray(routeNew)-2)*60+ 30+ -2 +'px',
                'borderTop': '4px solid #CCCFD9'
              }
            }else if(this.maxArray(routeNew) ==13){
              return{
                'width': (this.maxArray(routeNew)-1)* 60 +(this.maxArray(routeNew)-2)*60+(-10) +'px',
                'borderTop': '4px solid #CCCFD9'
              }
            }
            // 最大值为14，且包含13
          }else if(this.maxArray(routeNew) == 14 && routeNew.indexOf(13)>-1){
            return{
              'width': '1364px',
              'borderTop': '4px solid #CCCFD9',
              'borderRight': '4px solid #CCCFD9'
            }
            // 最大值为14，不包含13
          }else if(this.maxArray(routeNew) == 14 && this.routeNew.indexOf(13)<=-1){
            return{
              'width': '1364px',
              'borderTop': '4px solid #CCCFD9',
              'borderRight': '4px solid #CCCFD9'
            }
            // 最大值大于14，包含13,14 && routeNew.indexOf(13)>-1 && routeNew.indexOf(14)>-1
          }else if(this.maxArray(routeNew) > 14){
            // 不包含26
            if(this.maxArray(routeNew)<26){
              return{
                'width':  '1364px',
                'borderRight': '4px solid #CCCFD9',
                'borderTop': '4px solid #CCCFD9',
                'height':'82px'
                // 'borderBottom': '4px solid #fff'
              }
            }
            else if(this.maxArray(routeNew) == 26){
              return{
                'width': 1364 + 'px',
                'borderTop': '4px solid #CCCFD9',
                'borderRight': '4px solid #CCCFD9',
                'borderBottom': '4px solid #CCCFD9'
              }
            }
            // 最大值大于14，包含13,不包含14
          }
          // else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(13)>-1 && routeNew.indexOf(14)<=-1){

          //   //  最大值大于14，不包含13,包含14
          // }else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(14)>-1 && routeNew.indexOf(13)<=-1){
            
          //   // 最大值大于14，不包含13,不包含14
          // }else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(14)<=-1 && routeNew.indexOf(13)<=-1){

          // }
          
        }
      },
      lineStyleThreeBottom(){
        return function(routeNew){
          if(this.maxArray(routeNew)<26){
            return{
              'width':  (this.maxArray(routeNew)-14)* 60 +(this.maxArray(routeNew)-15)*60+30+ (-13) +'px',
              'borderRight': '4px solid #CCCFD9',
              'borderTop': '4px solid #CCCFD9',
            }
          }
        }
      },
      // 第四条
      lineFourStyle(){
        return function(routeNew){
          console.log(routeNew)
          // 路线长度最大13
          if(this.maxArray(routeNew) <= 13){
            if(this.maxArray(routeNew)<13){
              console.log(this.maxArray(routeNew))
              return{
                'width': (this.maxArray(routeNew)-1)* 60 +(this.maxArray(routeNew)-2)*60+ 30+ -14 +'px',
                'borderTop': '4px solid #CCCFD9'
              }
            }else if(this.maxArray(routeNew) ==13){
              return{
                'width': (this.maxArray(routeNew)-1)* 60 +(this.maxArray(routeNew)-2)*60+(-30) +'px',
                'borderTop': '4px solid #CCCFD9'
              }
            }
            // 最大值为14，且包含13
          }else if(this.maxArray(routeNew) == 14 && routeNew.indexOf(13)>-1){
            return{
              'width': '1341px',
              'borderTop': '4px solid #CCCFD9',
              'borderRight': '4px solid #CCCFD9'
            }
            // 最大值为14，不包含13
          }else if(this.maxArray(routeNew) == 14 && this.routeNew.indexOf(13)<=-1){
            return{
              'width': '1341px',
              'borderTop': '4px solid #CCCFD9',
              'borderRight': '4px solid #CCCFD9'
            }
            // 最大值大于14，包含13,14 && routeNew.indexOf(13)>-1 && routeNew.indexOf(14)>-1
          }else if(this.maxArray(routeNew) > 14){
            // 不包含26
            if(this.maxArray(routeNew)<26){
              return{
                'width':  '1341px',
                'borderRight': '4px solid #CCCFD9',
                'borderTop': '4px solid #CCCFD9',
                'height':'56px'
                // 'borderBottom': '4px solid #fff'
              }
            }
            else if(this.maxArray(routeNew) == 26){
              return{
                'width': 1341 + 'px',
                'borderTop': '4px solid #CCCFD9',
                'borderRight': '4px solid #CCCFD9',
                'borderBottom': '4px solid #CCCFD9'
              }
            }
            // 最大值大于14，包含13,不包含14
          }
          // else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(13)>-1 && routeNew.indexOf(14)<=-1){

          //   //  最大值大于14，不包含13,包含14
          // }else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(14)>-1 && routeNew.indexOf(13)<=-1){
            
          //   // 最大值大于14，不包含13,不包含14
          // }else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(14)<=-1 && routeNew.indexOf(13)<=-1){

          // }
          
        }
      },
      lineStyleFourBottom(){
        return function(routeNew){
          if(this.maxArray(routeNew)<26){
            return{
              'width':  (this.maxArray(routeNew)-14)* 60 +(this.maxArray(routeNew)-15)*60+30+ (-25) +'px',
              'borderRight': '4px solid #CCCFD9',
              'borderTop': '4px solid #CCCFD9',
            }
          }
        }
      },
      // 第五条
      lineFiveStyle(){
        return function(routeNew){
          console.log(routeNew)
          // 路线长度最大13
          if(this.maxArray(routeNew) <= 13){
            if(this.maxArray(routeNew)<13){
              console.log(this.maxArray(routeNew))
              return{
                'width': (this.maxArray(routeNew)-1)* 60 +(this.maxArray(routeNew)-2)*60+ 30+ -26 +'px',
                'borderTop': '4px solid #CCCFD9'
              }
            }else if(this.maxArray(routeNew) ==13){
              return{
                'width': (this.maxArray(routeNew)-1)* 60 +(this.maxArray(routeNew)-2)*60+(-55) +'px',
                'borderTop': '4px solid #CCCFD9'
              }
            }
            // 最大值为14，且包含13
          }else if(this.maxArray(routeNew) == 14 && routeNew.indexOf(13)>-1){
            return{
              'width': '1318px',
              'borderTop': '4px solid #CCCFD9',
              'borderRight': '4px solid #CCCFD9'
            }
            // 最大值为14，不包含13
          }else if(this.maxArray(routeNew) == 14 && this.routeNew.indexOf(13)<=-1){
            return{
              'width': '1318px',
              'borderTop': '4px solid #CCCFD9',
              'borderRight': '4px solid #CCCFD9'
            }
            // 最大值大于14，包含13,14 && routeNew.indexOf(13)>-1 && routeNew.indexOf(14)>-1
          }else if(this.maxArray(routeNew) > 14){
            // 不包含26
            if(this.maxArray(routeNew)<26){
              return{
                'width':  '1318px',
                'borderRight': '4px solid #CCCFD9',
                'borderTop': '4px solid #CCCFD9',
                'height':'30px'
                // 'borderBottom': '4px solid #fff'
              }
            }
            else if(this.maxArray(routeNew) == 26){
              return{
                'width': 1318 + 'px',
                'borderTop': '4px solid #CCCFD9',
                'borderRight': '4px solid #CCCFD9',
                'borderBottom': '4px solid #CCCFD9'
              }
            }
            // 最大值大于14，包含13,不包含14
          }
          // else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(13)>-1 && routeNew.indexOf(14)<=-1){

          //   //  最大值大于14，不包含13,包含14
          // }else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(14)>-1 && routeNew.indexOf(13)<=-1){
            
          //   // 最大值大于14，不包含13,不包含14
          // }else if(this.maxArray(routeNew) > 14 && routeNew.indexOf(14)<=-1 && routeNew.indexOf(13)<=-1){

          // }
          
        }
      },
      lineStyleFiveBottom(){
        return function(routeNew){
          if(this.maxArray(routeNew)<26){
            return{
              'width':  (this.maxArray(routeNew)-14)* 60 +(this.maxArray(routeNew)-15)*60+30+ (-37) +'px',
              'borderRight': '4px solid #CCCFD9',
              'borderTop': '4px solid #CCCFD9',
            }
          }
        }
      },
    },
    destroyed() {

    },
  })
});